import React, { useState } from 'react';
import { StyleSheet, Text, ImageBackground } from 'react-native';
import AppLoading from 'expo-app-loading';
import { size_x, size_y } from './Size';
import useFonts from './useFonts';
const styles = StyleSheet.create({
    container: {
        padding: 80,
        width: size_y(320),
        flex: 1,
        justifyContent: 'center',
        margin: 10
    },
    title: {
        fontSize: 40,
        fontWeight: 'bold',
        color: '#ffffff',
        position: 'absolute',
        left: 10,
        bottom: 80,
    },
    range: {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#ffffff',
        position: 'absolute',
        left: 16,
        bottom: 60,
    },
    star: {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#ffffff',
        position: 'absolute',
        right: 20,
        bottom: 60,
    },
    logo: {
        width: 66,
        height: 58,
    },
    iconStyle: {
        fontFamily: 'iconfont',
        color: '#F2CB51',
        fontSize: 24,
        position: 'absolute',
        right: 50,
        bottom: 60,
    },
});
// 'https://reactnative.dev/img/tiny_logo.png'
const DisplayAnImage = (props) => {
    const [IsReady, SetIsReady] = useState(false);
    const LoadFonts = async () => {
        await useFonts();
    };
    if (!IsReady) {
        return (
            <AppLoading
                startAsync={LoadFonts}
                onFinish={() => SetIsReady(true)}
                onError={() => { }}
            />
        );
    }
    return (
        <ImageBackground imageStyle={{ borderRadius: 10 }} style={styles.container} source={{ uri: props.uri }}>
            <Text style={styles.title}>{props.title}</Text>
            <Text style={styles.range}>距离您 {props.range}</Text>
            <Text style={styles.iconStyle}>{'\ue870'}</Text>
            <Text style={styles.star}>{props.star}</Text>
        </ImageBackground>
    );
};

export default DisplayAnImage;